Highcharts এ Export Button এবং Menu Customization একটি অত্যন্ত শক্তিশালী ফিচার যা ব্যবহারকারীদের তাদের চার্টের বিভিন্ন ধরনের ফরম্যাটে এক্সপোর্ট করার সুবিধা প্রদান করে। আপনি চার্টের ডেটা PNG, JPEG, PDF, SVG, CSV, XLS, ইত্যাদি ফরম্যাটে এক্সপোর্ট করতে পারবেন এবং আপনি এই এক্সপোর্ট মেনু এবং বাটনের কাস্টমাইজেশনও করতে পারেন।
Export Button সেটআপ
Highcharts এ Export Button যোগ করতে হলে আপনাকে exporting অপশন ব্যবহার করতে হবে। এটি একটি ডিফল্ট বাটন তৈরি করে যা ব্যবহারকারীদের চার্ট এক্সপোর্ট করতে দেয়। নিচে একটি সাধারণ উদাহরণ দেওয়া হয়েছে, যেখানে এক্সপোর্ট বাটনটি আপনার চার্টে যুক্ত করা হয়েছে।
উদাহরণ: Basic Export Button
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Export Button Example'
},
exporting: {
enabled: true // এক্সপোর্ট বাটন সক্রিয় করা
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
এখানে, exporting.enabled অপশনটি true সেট করা হয়েছে, যার ফলে ডিফল্ট এক্সপোর্ট বাটন চার্টে প্রদর্শিত হবে। এই বাটনটি ব্যবহারকারীদেরকে বিভিন্ন ফরম্যাটে এক্সপোর্ট করার সুযোগ দেয়।
Export Menu Customization
আপনি Export Menu এর অপশন কাস্টমাইজ করতে পারেন যাতে এতে শুধুমাত্র আপনি প্রয়োজনীয় ফরম্যাটগুলোর অপশন থাকে অথবা আপনি মেনুর ডিজাইন পরিবর্তন করতে পারেন।
উদাহরণ: Export Menu কাস্টমাইজেশন
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Customized Export Menu Example'
},
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadSVG'] // এক্সপোর্ট মেনু কাস্টমাইজ করা
}
}
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
এখানে, contextButton.menuItems এর মাধ্যমে আপনি এক্সপোর্ট মেনুতে কোন ফরম্যাট গুলি প্রদর্শিত হবে তা কাস্টমাইজ করতে পারেন। এই উদাহরণে PNG, JPEG, এবং SVG এর অপশনগুলি রাখা হয়েছে এবং অন্যসব অপশন বাদ দেওয়া হয়েছে।
Export Button এর Layout কাস্টমাইজেশন
Highcharts এ Export Button এর অবস্থান এবং ডিজাইন কাস্টমাইজ করা সম্ভব। আপনি বাটনের অবস্থান পরিবর্তন করতে পারেন এবং এর আকারও কাস্টমাইজ করতে পারেন।
উদাহরণ: Button Position এবং Style কাস্টমাইজেশন
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Export Button Custom Position Example'
},
exporting: {
enabled: true,
buttons: {
contextButton: {
align: 'left', // বাটনের অবস্থান বামদিকে
verticalAlign: 'top', // বাটনের অবস্থান উপরে
x: 10, // বাম থেকে 10px
y: 10, // উপরের দিক থেকে 10px
symbolSize: 30 // বাটনের আকার
}
}
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
এখানে:
- align এবং verticalAlign ব্যবহার করে বাটনের অবস্থান পরিবর্তন করা হয়েছে।
- x এবং y প্রপার্টি ব্যবহার করে বাটনের অবস্থান আরও সূক্ষ্মভাবে নিয়ন্ত্রণ করা হয়েছে।
- symbolSize দিয়ে বাটনের আকার কাস্টমাইজ করা হয়েছে।
Exporting Options কাস্টমাইজেশন
Highcharts এ Exporting Options কাস্টমাইজ করার মাধ্যমে আপনি এক্সপোর্ট অপশনগুলির আরও উন্নত কনফিগারেশন করতে পারেন, যেমন ফাইলের নাম, রেজোলিউশন, টেক্সট, ইত্যাদি।
উদাহরণ: File Name এবং Resolution কাস্টমাইজেশন
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Export File Name and Resolution Customization'
},
exporting: {
enabled: true,
filename: 'custom_chart_name', // এক্সপোর্ট ফাইলের নাম কাস্টমাইজ করা
scale: 2 // রেজোলিউশন বাড়ানো (ডিফল্ট 1)
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
এখানে:
- filename প্রপার্টি দিয়ে এক্সপোর্ট করা ফাইলের নাম কাস্টমাইজ করা হয়েছে।
- scale প্রপার্টি দিয়ে এক্সপোর্ট ফাইলের রেজোলিউশন বাড়ানো হয়েছে।
Export Button Event Handling
Highcharts এ আপনি Export Button এর সাথে ইভেন্ট হ্যান্ডলার যোগ করতে পারেন, যাতে আপনি এক্সপোর্ট বাটনের উপর কোনো নির্দিষ্ট কার্যকলাপ বাস্তবায়ন করতে পারেন, যেমন লগিং বা ডেটা পরিবর্তন করা।
উদাহরণ: Export Button Click Event
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Export Button Event Handling Example'
},
exporting: {
enabled: true,
events: {
afterExport: function() {
alert('Chart has been exported successfully!');
}
}
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
এখানে, afterExport ইভেন্ট ব্যবহার করা হয়েছে, যাতে চার্ট এক্সপোর্ট করার পর একটি অ্যালার্ট প্রদর্শিত হবে।
উপসংহার
Highcharts এর Export Button এবং Menu Customization ফিচার ব্যবহার করে আপনি আপনার চার্টের এক্সপোর্ট বাটন এবং মেনুর ডিজাইন এবং কার্যকারিতা কাস্টমাইজ করতে পারেন। আপনি ফাইলের নাম, ফরম্যাট, অবস্থান এবং রেজোলিউশনসহ নানা দিক কাস্টমাইজ করে একটি উপযুক্ত এক্সপোর্ট বাটন তৈরি করতে পারেন, যা আপনার ইউজারের জন্য সহজ এবং কার্যকর হবে।
Read more
